<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>卡组查询</title>
    <meta name="baidu-site-verification" content="code-4K3D7mP5De" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="referrer" content="never">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <!-- 图片查看器 https://github.com/fengyuanchen/viewerjs -->
    <link href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.css" rel="stylesheet">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" id="id_name" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">来源</label>
                            <div class="layui-input-inline">
                                <input type="text" name="original"  id="id_original" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">分类</label>
                                <div class="layui-input-inline">
                                    <select name="sort" class="SelectPaymentMode">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
            <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" href='https://norhub.com.cn' target="_blank"> 添加 </a>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 公告 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="open">查看</a>
            <!-- <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a> -->
        </script>

    </div>
</div>
<div style="width:300px;margin:0 auto; padding:20px 0;">
    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42058202000053" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">鄂公网安备 42058202000053号</p></a>
</div>
<!-- 图片浏览盒子 -->
<ul id="imagediv" >
    <li><img id="imageview1" data-original='img/no.png' src='img/no.png' alt="图片1" style="display: none"></li>
    <li><img id="imageview2" data-original='img/no.png' src='img/no.png' alt="图片2" style="display: none"></li>
    <li><img id="imageview3" data-original='img/no.png' src='img/no.png' alt="图片3" style="display: none"></li>
</ul>
<script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<!-- 图片查看器 https://github.com/fengyuanchen/viewerjs -->
<script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.js"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table

        table.render({
            elem: '#currentTableId',
            url: '/v1/cron/job/job_plots',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 40},
                {field: 'id', width: 60, title: 'ID', sort: true},
                {field: 'name', minWidth: 80, title: '名称', sort: true},
                {field: 'original', minWidth: 80, title: '来源', sort: true},
                {field: 'comment', minWidth: 150, title: '备注'},
                {field: 'sort', width: 80, title: '类别'},
                {field: 'modtime', title: '修改时间', minWidth: 150, sort: true},
                //{field: 'isdelflag', width: 150, title: '是否有效', sort: true},
                {title: '操作', width: 80, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100, 300, 1000],
            limit: 100,
            page: false,
            skin: 'line'
        });

        //初演示
        $.post("/v1/cron/job/sorts", function (data) {
        for (var k in data.data) 
        {
            $(".SelectPaymentMode").append("<option value='" + data.data[k].sort + "'>" + data.data[k].sort + "</option>");
        }
        layui.use('form', function () {
                var form = layui.form;
                form.render();
            });
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
        var result = JSON.stringify(data.field)
        //执行搜索重载
        table.reload(
            'currentTableId',
            {
            page: {
                curr: 1,
            },
            where: {
                searchParams: result,
            },
            },
            'data'
        )
        return false
        })


        // //下拉框选择
        // form.on('select(test)', function (data) {
        //     //TODO执行自己的代码
        //     // 声明变量
        //     var input, filter, table, tr, td, i;
        //     input = document.getElementById("id_sort"); //定位id
        //     var indexs = input.selectedIndex; // 选中索引
        //     filter = input.options[indexs].text; // 选中文本
        //     var value = input.options[indexs].value; // 选中值

        //     filter = input.value.toUpperCase();
        //     table = document.getElementsByClassName("layui-table")[1];
        //     tr = table.getElementsByTagName("tr");

        //     // 循环表格每一行，查找匹配项
        //     for (i = 0; i < tr.length; i++) {
        //         td = tr[i].getElementsByTagName("td")[5];
        //         if (td) {
        //         if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        //             tr[i].style.display = "";
        //         } else {
        //             tr[i].style.display = "none";
        //         }
        //         } 
        //     }
        // });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加卡组',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'page/table/add.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                //layer.alert(JSON.stringify(data));
                //示范一个公告层
                layer.open({
                    type: 1
                    , title: false //不显示标题栏
                    , closeBtn: false
                    , area: '300px;'
                    , shade: 0.8
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btn: ['火速加群', '残忍拒绝']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: '<html><head></head><body><div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">最近一次更新内容如下<br /><br />更新：请按时间排序查看更新<br />新增：请按时间排序查看新增<br /><br />卡组来源自网络，如果你愿意提供卡组，请加群或者发送卡组给（QQ：1214025414）<br /><br />感谢所有提供卡组的朋友 ^_^</div></body></html>'
                    , success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: 'https://jq.qq.com/?_wv=1027&k=cWrfD3PR'
                            , target: '_blank'
                        });
                    }
                });
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                var index = layer.open({
                    title: '编辑卡组',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'page/table/edit.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'open') {
                if(data.url1){
                    $('#imageview1').attr('src', data.url1)
                    $('#imageview2').attr('src', 'img/no.png')
                    $('#imageview3').attr('src', 'img/no.png')
                }
                if(data.url1&&data.url2){
                    $('#imageview1').attr('src', data.url1)
                    $('#imageview2').attr('src', data.url2)
                    $('#imageview3').attr('src', 'img/no.png')
                }
                if(data.url1&&data.url2&&data.url3){
                    $('#imageview1').attr('src', data.url1)
                    $('#imageview2').attr('src', data.url2)
                    $('#imageview3').attr('src', data.url3)
                }
                var viewer = new Viewer(document.getElementById('imagediv'))
                $('#imageview1').click()
            }
        });

    });

    // // 声明变量
    // function findtable(id,index) {
    //     // 声明变量
    //     var input, filter, table, tr, td, i;
    //     input = document.getElementById(id);
    //     filter = input.value.toUpperCase();
    //     table = document.getElementsByClassName("layui-table")[1];
    //     tr = table.getElementsByTagName("tr");

    //     // 循环表格每一行，查找匹配项
    //     for (i = 0; i < tr.length; i++) {
    //         td = tr[i].getElementsByTagName("td")[index];
    //         if (td) {
    //         if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    //             tr[i].style.display = "";
    //         } else {
    //             tr[i].style.display = "none";
    //         }
    //         } 
    //     }
    // }
</script>

</body>
</html>